<template>
  <div class="home">
    <UniHeader />
    <MenuList :list="menulist" :type="'big'"></MenuList>
    <MenuList :list="sublist"></MenuList>
    <AdvertisementView></AdvertisementView>
    <WaterFall :itemList="recommendList"></WaterFall>
    <NavTab></NavTab>
  </div>
</template>

<script>
// @ is an alias to /src
import UniHeader from '@/components/UniHeader.vue'
import MenuList from '@/components/MenuList.vue'
import AdvertisementView from '@/components/AdvertisementView.vue'
import WaterFall from '@/components/WaterFall.vue'
import NavTab from '@/components/NavTab.vue'
import { useStore } from "vuex"
import { computed } from 'vue'
export default {
  name: 'HomeView',
  components: {
    UniHeader,
    MenuList,
    AdvertisementView,
    WaterFall,
    NavTab
  },
  setup() {
    let list = []
    for (let i = 1; i <= 20; i++) {
      list.push({
        url: `https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302&random=${Math.random()}`,
        title: '中华郡国际旅游度假区',
        sub: '亲子游乐天堂',
        price: '¥40'
      })
    }
    const store = useStore()
    store.commit('setRecommendList', list)
    return {
      recommendList: computed(() => store.state.recommendList),
      menulist: [
        {
          name: '自由行',
          url: '/free',
          src: require('../assets/biaoqian.png')
        },
        {
          name: '度假',
          url: '/free',
          src: require('../assets/biji.png')
        },
        {
          name: '红色经典',
          url: '/free',
          src: require('../assets/dianzan.png')
        },
        {
          name: '酒店',
          url: '/free',
          src: require('../assets/huiyuan.png')
        }
      ],
      sublist: [
        {
          name: '民宿客栈',
          url: '/free',
          src: require('../assets/huore.png')
        },
        {
          name: '专车自驾',
          url: '/free',
          src: require('../assets/jiemi.png')
        },
        {
          name: '旅游团购',
          url: '/free',
          src: require('../assets/kuaitui.png')
        },
        {
          name: '一日游',
          url: '/free',
          src: require('../assets/mima.png')
        },
        {
          name: '特惠酒店',
          url: '/free',
          src: require('../assets/paizhao.png')
        }
      ]

    }
  }
}
</script>
<style scoped>
.home {
  height: 100vh;
  overflow-y: scroll;
  background: white;
}
</style>
